<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button :class="show === true ? 'btn-on' : 'btn-off'" type="text" size="mini" @click="show = true">商户资料信息</el-button>
      <el-button :class="show === false ? 'btn-on' : 'btn-off'" type="text" size="mini" @click="show = false">支付通道信息</el-button>
    </el-row>
    <transition name="fade-transform" mode="out-in">
      <base-details v-if="show" class="mt10"></base-details>
      <channel-details v-else class="mt20"></channel-details>
    </transition>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import BaseDetails from './components/base_details'
import ChannelDetails from './components/channel_details'

export default {
  name: 'merchantDetails',
  components: {
    Breadcrumb,
    BaseDetails,
    ChannelDetails
  },
  data() {
    return {
      show: true
    }
  },
  created() {
    if (this.$route.query.type === 'merchant') {
      this.show = true
    } else if (this.$route.query.type === 'channel') {
      this.show = false
    }
  }
}
</script>